<template class="dfsd">
  <div class="dashboard-container">
    <div class="dashboard">
      <ul>
        <li>
          <!-- <span class="el-icon-s-home icon"></span> -->
          <div class="img">
            <img src="@/assets/img_1.png"/>
          </div>
          <div class="div_2">
            <p>今年订单量</p>
            <span>{{head_data.this_year_order_num}}</span>
          </div>
        </li>
        <li>
          <div class="img">
            <img src="@/assets/img_2.png"/>
          </div>
          <div  class="div_2">
            <p>待验收订单</p>
            <span>{{ head_data.pending_acceptance_order_nunber}}</span>
          </div>
        </li>
        <li>
          <div class="img">
            <img src="@/assets/img_3.png"/>
          </div>
          <div  class="div_2">
            <p>已发货订单</p>
            <span>{{ head_data.shipped_order_number}}</span>
          </div>
        </li>
        <li>
          <div class="img">
            <img src="@/assets/img_4.png"/>
          </div>
          <div  class="div_2">
            <p>未发货订单</p>
            <span>{{head_data.unfilled_orders_number}}</span>
          </div>
        </li>
        <li>
          <div class="img">
            <img src="@/assets/img_5.png"/>
          </div>
          <div  class="div_2">
            <p>备货量</p>
            <span>{{head_data.qty_backordered}}</span>
          </div>
        </li>
        <li>
          <div class="img">
            <img src="@/assets/img_6.png"/>
          </div>
          <div  class="div_2">
            <p>生产中订单量</p>
            <span>{{head_data.quantity_of_orders_in_production}}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="bot_body">
      <div class="bot">
        <span>近30天订单数</span>
        <div class="line" id="main"></div>
      </div>
      <div class="bot">
        <span>年度客户下单TOP10 </span>
        <div class="line" id="top10"></div>
      </div>
    </div>

    <div class="bot_body">
      <div class="bot">
        <span>年度产品TOP10</span>
        <div class="line" id="box_3"></div>
      </div>
      <div class="bot">
        <span>近6个月数据 </span>
        <div class="line" id="box_4"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getIndexHeaderData,
  getThirtyDayOrderNumber,
  getTOP10Customer,
  getAnnualProductOrderNumber,
  getNearlySexMonthsOrderNumber,
} from "@/api/user";
export default {
  name: "dashboard",
  data() {
    return {
      head_data: {}
    };
  },
  mounted() {
    this.getdata();
    this.line();
    this.get_TOP10Customer();
    this.get_AnnualProductOrderNumber();
    this.get_NearlySexMonthsOrderNumber();
  },
  methods: {
    get_NearlySexMonthsOrderNumber() {
      getNearlySexMonthsOrderNumber().then((res) => {
        if (res.code == 200) {
          let xAxis= res.data.xAxis
          let yAxis= res.data.yAxis
          var chartDom = document.getElementById("box_4");
          var myChart = this.$echarts.init(chartDom);
          var option;

          option = {
            color:'#cc5c45',
            grid: {
              top:20,
              right: 0,
              bottom:25,
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: xAxis
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: yAxis,
                type: "line",
                areaStyle: {},
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    get_AnnualProductOrderNumber() {
      getAnnualProductOrderNumber().then((res) => {
        if (res.code == 200) {
          let xAxis=res.data.xAxis
          let yAxis=res.data.yAxis
          var chartDom = document.getElementById("box_3");
          var myChart = this.$echarts.init(chartDom);
          var option;
          option = {
            grid: {
              top:20,
              right: 0,
              bottom:25,
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              type: "category",
              data: xAxis
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: yAxis,
                type: "bar",
                itemStyle:{
                  color:function(params){
                    var colorList = [           
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                                    
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',		    	                               
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
		    	         ];
		    	         return colorList[params.dataIndex]
                  }
              }
            }
            ]
          };

          option && myChart.setOption(option);
        }
      });
    },
    // 年度客户下单TOP10
    get_TOP10Customer() {
      getTOP10Customer().then((res) => {
        if (res.code == 200) {
          const arr1 = res.data.xAxis
          const arr2 = res.data.yAxis
          // 使用map方法遍历arr1，将每个元素与arr2对应位置的元素组成一个新数组
          const result = arr1.map((item, index) => [item, arr2[index]]);
          var data=[]
            for (var i = result.length - 1; i >= 0; i--) {
                data.push(result[i])
            }
          var chartDom = document.getElementById("top10");
          var myChart = this.$echarts.init(chartDom);
          var option;
          option = { 
            grid: {
              top:20,
              right: 0,
              bottom:25,
            },
            tooltip: {
              trigger: "axis",
            },
            dataset: {
              source: [
                ["amount", "product"],
                ...data
              ],
            },
            // grid: { containLabel: true },
            xAxis: { name: "amount" },
            yAxis: { type: "category" }, 
            series: [
              {
                type: "bar",
                encode: {
                  // Map the "amount" column to X axis.
                  x: "amount",
                  // Map the "product" column to Y axis
                  y: "product",
                },
                itemStyle:{
                  color:function(params){
                    var colorList = [           
                             '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                                    
                             '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',		    	                               
                             '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
		    	         ];
		    	         return colorList[params.dataIndex]
                  }
                }
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    getdata() {
      getIndexHeaderData().then((res) => {
        if (res.code == 200) {
          this.head_data = res.data;
        }
      });
    },
    // 近30天订单数
    line() {
      getThirtyDayOrderNumber().then((res) => {
        if (res.code == 200) {
          var chartDom = document.getElementById("main");
          var myChart = this.$echarts.init(chartDom);
          var option;
          let timedata = res.data.xAxis;
          let data_y = res.data.yAxis;
          option = {
            grid: {
              top:20,
              right: 0,
              bottom:25,
            },
            tooltip: {
              trigger: "axis",
            },
            // grid: {
            //   right: "20%",
            // },
            calculable: true,
            xAxis: {
              type: "category",
              data: timedata,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: data_y,
                type: "line",
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
  },
};
</script>

<style scoped>
:root{
  --background_bg:'#000000',
}


section{
    padding: 0px !important;;
    box-sizing: border-box;
}
.dashboard-container{
  width: 100%;
  box-sizing: border-box;
  background:var(--background_bg);
}
ul li {
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.icon {
  font-size: 45px;
  color: #1f6893;
}

.dashboard ul {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-around; */
  padding: 0;
  margin: 0;
}

.dashboard ul li {
  width: 225px;
  padding: 10px;
  float: left;
  margin-right:49px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  margin-top: 15px;
  background: #fff;
  box-shadow: 0px 0px 8px 1px rgba(0,0,0,.1);
}
.dashboard ul li:last-child{
  margin-right: 0;
}

.dashboard ul li div.img{
  width: 60px;
  height: 60px;
}
.dashboard ul li div.img img{
  width: 100%;
}

.dashboard ul li div.div_2 {
  flex: 1;
  margin-left: 10px;
  text-align: center;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space- ;
}

.dashboard ul li div.div_2 p {
  font-size: 16px;
  color: #333;
  padding: 0;
  margin: 0;
}
.dashboard ul li div.div_2 span {
  font-size: 32px;
  color: #1f6893;
  font-weight: bold;
}
/* .dashboard ul li:nth-child(4n-3) {
  margin-left: 25px;
} */

.line {
  width: 250px;
  height:300px;
}

.bot_body {
  box-sizing: border-box;
  display: flex;
  /* margin-top:15px; */
  clear: both;
}

.bot {
  width: 50%;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-left: 15px;
  background: #fff;
  box-shadow: 0px 0px 8px 1px rgba(0,0,0,.1);

}

.bot_body .bot:nth-child(3n-2) {
  margin-left: 0;
}
.bot span {
  font-size: 16px;
  color: #1f6893;
  font-weight: bold;
  border-left: 3px solid #1f6893;
  padding-left: 10px;
}
.bot div {
  width: 100%;
  height:300px;
}
</style>
